<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <el-container>
          <el-header>
            <div class="d-flex jc-center">
              <dv-decoration-10 class="dv-dec-10" />
              <div class="d-flex jc-center">
                <dv-decoration-8
                  class="dv-dec-8"
                  :color="['#00c2ff', '#000000']"
                />
                <div class="title">
                  <span class="title-text">垃圾收运大数据可视化平台</span>
                  <dv-decoration-6 class="dv-dec-6" :reverse="true" />
                </div>
                <dv-decoration-8
                  class="dv-dec-8"
                  :reverse="true"
                  :color="['#00c2ff', '#000000']"
                />
              </div>
              <dv-decoration-10 class="dv-dec-10-s" />
            </div>

            <!-- 第二行 -->
            <div class="d-flex jc-between px-2">
              <div class="d-flex aside-width">
                <div class="react-left ml-4 react-l-s">
                  <span class="react-before"></span>
                  <!-- <span class="text">数据分析1</span> -->
                  <dv-decoration-3 style="width: 300px; height: 50px" />

                  <!-- <dv-decoration-10  class="dv-dec-10-s"/> -->
                </div>
                <div class="react-left ml-4">
                  <span class="react-before"></span>
                  <!-- <router-link to="/Rubbish"> -->
                  <dv-border-box-7 :color="this.Citycolor">
                    <h5 class="text" @click="turnCityRubbish()">市级</h5>
                  </dv-border-box-7>
                  <!-- </router-link> -->
                  <!-- <dv-decoration-3 style="width: 300px; height: 50px" /> -->

                  <!-- <dv-decoration-10  class="dv-dec-10-s"/> -->
                </div>
              </div>
              <div class="d-flex aside-width">
                <div class="react-right mr-3">
                  <dv-border-box-7 :color="this.Areacolor">
                    <h5 class="text" @click="turnAreaRubbish()">区级</h5>
                  </dv-border-box-7>
                  <!-- </router-link> -->
                  <!-- <dv-decoration-3 style="width: 300px; height: 50px" /> -->

                  <!-- <dv-decoration-10  class="dv-dec-10-s"/> -->
                </div>
                <div class="react-right mr-3">
                  <!-- <span class="text fw-b">vue-big-screen</span> -->
                  <dv-decoration-3 style="width: 300px; height: 50px" />
                </div>
              </div>
            </div>
          </el-header>
          <el-main style="margin-top: 2%">
            <!-- <v-city></v-city> -->
            <router-view></router-view>
          </el-main>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "../utils/drawMixin";
import { formatTime } from '../utils/index.js'
export default {
  mixins: [drawMixin],
  data () {
    return {
      radio1: '上海',
      form: {
        userName: 'dlhw',
        date: '2020-10',
        clientNo: '0000009',
        RubbishData: [{
          排队数: '0',
          车辆总数: '0',
          出动数: '0',
          出动率: '0',
        }],
      },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {},
        VIcon_Installations: {},
        VText_Installations: {},
      },
      Data: {
        arrayForType_Rubbish: [],
        arrayCLCPolygonData: [],
        arrayCLCMarkerData: [],
        arrayZZZMarkerData: [],
        arrayNCDMarkerData: [],
        arrayXQCYMarkerData: [],
        arrayCYMarkerData: [],
      },
      isZoomChange: 'S',
      map: null,
      mapZoom: 16,
      timing: null,
      loading: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
      Citycolor: ['#2b9ae3', '#83d7fc'],
      Areacolor: ['#0c3855', '#83d7fc'],
    }
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
    // 'v-city': city,
  },
  created () {
    var ClientNo = window.location.href.split('ClientNo=')[1];
    localStorage.setItem('ClientNo', ClientNo)
  }, 
  mounted () {
    this.timeFn()
    switch (this.$router.currentRoute.path) {
      case '/CityRubbish':
        {
          this.Citycolor = ['#2b9ae3', '#83d7fc']
          this.Areacolor = ['#0c3855', '#83d7fc']
        }
        break;
      case '/AreaRubbish':
        {
          this.Citycolor = ['#0c3855', '#83d7fc'],
          this.Areacolor = ['#2b9ae3', '#83d7fc']
        }
        break;
    }
  },
  beforeDestroy () {
    clearInterval(this.timing)
  },
  methods: {

    turnCityRubbish () {
      this.$router.push({
        path: '/CityRubbish'
      })
      this.Citycolor = ['#2b9ae3', '#83d7fc'],
        this.Areacolor = ['#0c3855', '#83d7fc']
    },
    turnAreaRubbish () {
      this.$router.push({
        path: '/AreaRubbish'
      })
      this.Citycolor = ['#0c3855', '#83d7fc'],
      this.Areacolor = ['#2b9ae3', '#83d7fc']
    },
    timeFn () {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false
        this.initC();
      }, 2000)
    },
  }
}
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
//下方区域的布局
// 底部数据
.bototm-box {
  margin-top: 10px;
  display: grid;
  // grid-template-columns: repeat(2, 50%);
}
.title {
  padding-top: 10px;
  padding-left: 20px;
  .text {
    font-size: 15px;
  }
}
.title-text {
  font-family: 'SimHei';
  font-weight: bold;
}

.text {
  font-size: 15px;
  font-weight: bold;
}
.home {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
</style>
